<template>
	<view>
		<u-navbar title="修改地址" :autoBack="true" :placeholder="true" @rightClick="deleteAddress" :rightIcon="navRight">
		</u-navbar>
		<view class="main">
			<u--form :model="formData" ref="formData" :rules="rules">
				<u-form-item label="姓名" prop="name">
					<u--input v-model="formData.name" clearable></u--input>
				</u-form-item>

				<u-form-item label="电话" prop="phone">
					<u--input v-model="formData.phone" clearable></u--input>
				</u-form-item>

				<u-form-item label="地址" prop="address">
					<u-input v-model="formData.address" clearable>
						<template slot="suffix">
							<u-icon @click="goLocation" name="map-fill"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="详细地址" prop="detailadd">
					<u-textarea
						style="background:white; padding:0.5rem; width: 100%; height: 5rem; border:1px solid #ccc;"
						v-model="formData.detailadd" placeholder="街道,小区,单元,门牌号等"></u-textarea>
					<!-- <u--input v-model="formData.detailadd" placeholder="街道,小区,单元,门牌号等" clearable></u--input> -->
				</u-form-item>
			</u--form>
			<u-divider text="分割线" :dot="true"></u-divider>
			<view class="check1">
				<span>设为默认地址</span>
				<u-switch v-model="formData.isDefault" @change="change"></u-switch>
			</view>
			<u-button class="button" @click="save">{{ buttonText }}</u-button>
		</view>
	</view>
</template>

<script>
export default {
	mounted() {
		let data = this.$store.state.address.curModifyAddress || {};
		if (data.name) {
			this.formData = data
		}
		if (this.formData.name) {
			this.buttonText = '修改'
			this.navRight = "trash"
		} else {
			this.buttonText = '保存'
		}
	},
	data() {
		return {
			navRight: '',
			buttonText: '',
			test: "ceshi",
			formData: {
				name: '',
				phone: '',
				address: '',
				detailadd: '',
				isDefault: false
			},
			rules: {
				detailadd:
				{
					required: true,
					message: "请输入详细地址",
					trigger: ['blur', 'change']
				},
				address: {
					required: true,
					message: "请输入地址",
					trigger: ['blur', 'change']
				},
				name:
				{
					required: true,
					message: "请输入姓名",
					trigger: ['blur', 'change']
				},

				phone: [
					{
						required: true,
						message: "请输入联系方式",
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}
				]
			}
		}
	},	
	onBackPress(){
		// 监听回退
		this.$store.commit('SET_CUR_ADDRESS',{})
		return false;
	},
	methods: {
		goLocation() {
			uni.showLoading({
				title: '正在获取地理位置'
			});
			// 获取当前地理位置
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				isHighAccuracy: true,
				success: ({ address }) => {
					uni.hideLoading();
					this.formData.address = address.country + address.province + address.city + address.district;
					this.formData.detailadd = address.street + address.streetNum + address.poiName
				}
			})

		},
		save() {
			if (this.buttonText == '保存') {
				// 保存地址/新增地址
				// 合并参数
				this.$refs.formData.validate().then(res => {
					if (res) {
						this.$store.dispatch('addAddress', this.formData).then(resj => {
							this.$Router.back()
						})
					}
				})
			} else {
				// 修改地址
				console.log('修改地址')
				this.$refs.formData.validate().then(res => {
					if (res) {
						this.$store.dispatch('updateAddress', this.formData).then(resj => {
							this.$Router.back()
						})
					}
				})
			}
		},
		change(e) {
			this.formData.isDefault = e
		},
		deleteAddress() {
			uni.showModal({
				title: '提示',
				content: '您确定要刪除该收货地址',
				success: (res) => {
					this.$store.dispatch('deleteAddress', this.formData.id).then(res => {
						if (res == 'success') {
							this.$tools.toast('删除成功')
							this.$Router.back()
						}
					})
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	margin: 1.5rem 1rem 1rem 1rem;

	.check1 {
		margin-top: 1.5rem;
		display: flex;
		justify-content: space-between;
	}

	.button {
		position: fixed;
		bottom: 0.5rem;
		left: calc(50% - 45%);
		color: white;
		width: 90%;
		background-color: $uni-color-theme-6;
		border-radius: 2rem;

	}
}
</style>
